<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>短信平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.css}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{/css/fontastic.css}">
    <!-- Google fonts - Roboto -->
    <!--<link rel="stylesheet" th:href="@{https://fonts.googleapis.com/css?family=Roboto:300,400,500,700}">-->
    <!-- jQuery Circle-->
    <link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" th:href="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.blue.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <!--toastr-->
    <link rel="stylesheet" th:href="@{/css/toastr.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-datetimepicker.css}">
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/bootstrapStyle.css}" type="text/css">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <style>
        .ztree * {
            padding: 0;
            margin: 0;
            font-size: 16px;
        }
    </style>
</head>

<body>
<!-- Side Navbar -->
<div th:replace="~{/pages/common/side_navbar.html}"></div>
<div class="page">
    <!-- navbar-->
    <div th:replace="~{/pages/common/header_navbar.html}"></div>

    <!--页码代码-->
    <!-- Breadcrumb-->
    <!-- Breadcrumb-->
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">发送短信</a></li>
            </ul>
        </div>
    </div>
    <section class="dashboard-counts">
        <div class="card">
            <div class="card-header d-flex align-items-center">
                <h4>发送短信</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-lg-9">
                <div class="card-body ">
                    <form class="form-horizontal">
                        <div class="form-group row h-auto">
                            <label class="col-md-2 col-lg-2 form-control-label">接收人</label>
                            <div class="col-md-10 col-lg-10">
                                <textarea id="addressBook" class="form-control" style="max-height: 300px" readonly
                                          placeholder="从通讯录中选择用户，多个以英文逗号,分开,总人数不能超过5000个"></textarea>
                                <input type="hidden" id="userBookPhone">
                                <input type="hidden" id="userBookName">
                            </div>
                        </div>
                        <div class="form-group row h-auto">
                            <label class="col-md-2 col-lg-2 form-control-label">其他接收人</label>
                            <div class="col-md-10  col-lg-10">
                                <textarea id="ortherUser" class="form-control "
                                          placeholder="输入其他用户，多个以英文逗号,分开,总人数不能超过5000个"></textarea>
                                <input style="color:red;border: none;background-color: transparent;width: 350px" value="多个以英文逗号(,)分开,总人数不能超过5000个" >
                            </div>
                        </div>
                        <div class="form-group row ">
                            <label class="col-md-2 col-lg-2 form-control-label">短信主题</label>
                            <div class="col-md-10 col-lg-10">
                                <input class="form-control " maxlength="100" id="topic" th:value="${data.msgSubject}"/>
                            </div>
                        </div>
                        <div class="form-group row ">
                            <label class="col-md-2 col-lg-2 form-control-label">短信正文</label>
                            <div class="col-md-10 col-lg-10">
                                <textarea class="form-control " style="height: 300px !important;"
                                          th:text="${data.msgContent}"
                                          placeholder="建议不要超过500" maxlength="500" id="content"></textarea>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="col-md-4 col-lg-6 offset-lg-4 offset-md-5">
                            <button type="button" class="btn btn-secondary " onclick="backPre()">返回</button>
                            <input type="hidden" id="url" th:value="${url}">
                            <button type="button" class="btn btn-primary " onclick="sendMsg()">发送</button>
                            <button type="button" class="btn btn-primary timingSend"
                                    data-toggle="modal" data-target="#modalCenter">定时发送
                            </button>
                            <button type="button" class="btn btn-primary " onclick="saveDraft()">保存至草稿箱
                            </button>
                            <input type="hidden" name="id" id="id" th:value="${data.id}">
                            <input type="hidden" id="flagStr" th:value="${flagStr}">
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-4 col-lg-3">
                <div>
                    <h4>通讯录</h4>
                </div>
                <div class="card zTreeDemoBackground">
                    <ul id="treeDemo" class="ztree"></ul>
                    <input type="hidden" id="treeList"
                           th:value="${tree}">
                </div>
            </div>
        </div>
    </section>
    <!-- Modal -->
    <div class="modal fade" id="modalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
         aria-hidden="false">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">选择定时发送时间</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body ">
                    <div class="forms col-8">
                        <input type="text" class="datetimepicker form-control " id="timer" data-link-field="date" readonly>
                        <input type="hidden" id="date"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary addSure" data-dismiss="modal">发送</button>
                </div>
            </div>
        </div>
    </div>
    <!--页码-->
    <div th:replace="~{/pages/common/foot.html}"></div>
</div>

</body>
<!-- JavaScript files-->
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/vendor/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
<script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"></script>
<!--<script th:src="@{/vendor/chart.js/Chart.min.js}"></script>-->
<script th:src="@{/vendor/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
<!--<script th:src="@{/js/charts-home.js}"></script>-->
<!-- Main File-->
<script th:src="@{/js/front.js}"></script>
<script th:src="@{/js/toastr.min.js}"></script>
<script th:src="@{/js/base.js}"></script>
<script th:src="@{/js/autosize.min.js}"></script>
<script th:src="@{/js/bootstrap-datetimepicker.js}"></script>
<script th:src="@{/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.exedit.js}"></script>
<script>
    $(function () {
        toastr.options = {
            closeButton: false, //是否显示关闭按钮（提示框右上角关闭按钮）；
            debug: false, //是否为调试；
            progressBar: false, //是否显示进度条（设置关闭的超时时间进度条）
            positionClass: "toast-top-center", //消息框在页面显示的位置
            onclick: null, //点击消息框自定义事件
            showDuration: "300", //显示动作时间
            hideDuration: "1000", //隐藏动作时间
            timeOut: "2000", //自动关闭超时时间
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };

        $('.datetimepicker').datetimepicker({
            language: "zh-CN",
            format: 'yyyy-mm-dd hh:ii',
            autoclose: true,
            minView: 0,
            minuteStep: 5,
            startDate: getSpeicalTime(),    //设置开始时间，早于此刻的日期不能选择
        });

        //定时发送
        $(".addSure").click(function () {
            debugger;
            var msgTime = $("#date").val();
            if (msgTime == null || msgTime == "") {
                toastr.error("定时发送时间不可为空");
                return false;
            }

            var flag = $("#flagStr").val();
            var userBookPhone = $("#userBookPhone").val();
            var userBookName = $("#userBookName").val();
            var orther = $("#ortherUser").val();
            if ((userBookPhone == null || userBookPhone == '') && (orther == null || orther == "")) {
                toastr.error("接收人不可为空");
                return false;
            }
            if (orther != null && orther != "") {
                if (!checkOrtherUser(orther.trim())) {
                    return false;
                }
            }
            var topic = $("#topic").val();
            var content = $("#content").val();
            if (topic == null || topic == "") {
                toastr.error("短信主题不可为空");
                return false;
            }
            if (content == null || content == "") {
                toastr.error("短信内容不可为空");
                return false;
            }
            var totalMobile = userBookPhone.split(",").concat(orther.split(","));
            if (totalMobile.length > 5000) {
                toastr.error("接收人不可超过5000");
                return false;
            }
            var list = totalMobile.filter(function (s) {
                return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
            });
            var userBookArr = userBookPhone.split(",").filter(function (s) {
                return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
            });
            var userBookNameArr = userBookName.split(",").filter(function (s) {
                return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
            });
            var ortherArr = orther.split(",").filter(function (s) {
                return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
            });
            var userView = $("#addressBook").val().split(",").filter(function (s) {
                return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
            });
            var json = {};
            debugger;
            if (flag != "sendSms") {//从草稿箱跳过来的
                json.id = $("#id").val();
            }
            json.msgTime = msgTime;
            json.receiveBookUserView = userView.toString();
            json.receiveUserPhone = list.toString();
            json.msgSubject = topic;
            json.msgContent = content;
            json.receiveBookUserPhone = userBookArr.toString();
            json.receiveOrtherUserPhone = ortherArr.toString();
            json.receiveBookUserName = userBookNameArr.toString();
            $.requestJsonAjax({
                url: $appName + "/sms/info/sendTimingMsg",
                type: "post",
                data: json,
                success: function (result) {
                    if (result.success) {
                        toastr.success(result.msg);
                        setTimeout(function () {
                            /*  window.location.reload();*/
                            sessionStorage.setItem("menuCheckedId", "8a808eb6734cb30001734cb62ade0018");
                            sessionStorage.setItem("hasSub", 0);
                            window.location.href = $appName + "/sms/drafts/list";
                        }, 1500)
                    } else {
                        toastr.error(result.msg);
                    }

                }
            })
        })
    });
    function getSpeicalTime() {
        var now = new Date;
        now.setMinutes(now.getMinutes() + 10);
        return now;
    }
    //判断输入用户是否合规
    function checkOrtherUser(orther) {
        if (orther != null && orther != "") {
            if (orther.indexOf("，") != -1) {
                toastr.error("其他接收人输入带有中文逗号，请将中文分号改为英文逗号");
                return false;
            }
            var array = orther.split(",").filter(function (s) {
                return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
            });
            var up = new Array();
            $.each(array, function (i, n) {
                if (!checkPhone(n)) {
                    up.push(n);
                }
            })
            if (up.length > 0) {
                toastr.error("以下手机号不合法：" + up);
                return false;
            }
            return true;
        }
        return true;
    }

    function sendMsg() {
        debugger;
        var flag = $("#flagStr").val();
        var userBookPhone = $("#userBookPhone").val();
        var userBookName = $("#userBookName").val();
        var orther = $("#ortherUser").val();
        if ((userBookPhone == null || userBookPhone == '') && (orther == null || orther == "")) {
            toastr.error("接收人不可为空");
            return false;
        }
        if (orther != null && orther != "") {
            if (!checkOrtherUser(orther.trim())) {
                return false;
            }
        }
        var topic = $("#topic").val();
        var content = $("#content").val();
        if (topic == null || topic == "") {
            toastr.error("短信主题不可为空");
            return false;
        }
        if (content == null || content == "") {
            toastr.error("短信内容不可为空");
            return false;
        }
        var totalMobile = userBookPhone.split(",").concat(orther.split(","));
        if (totalMobile.length > 5000) {
            toastr.error("接收人不可超过5000");
            return false;
        }
        var list = totalMobile.filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var userBookArr = userBookPhone.split(",").filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var userBookNameArr = userBookName.split(",").filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var ortherArr = orther.split(",").filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var userView = $("#addressBook").val().split(",").filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var json = {};
        debugger;
        if (flag != "sendSms") {//不是从发送箱跳过来的
            json.id = $("#id").val();
        }
        json.receiveBookUserView = userView.toString();
        json.receiveUserPhone = list.toString();
        json.msgSubject = topic;
        json.msgContent = content;
        json.receiveBookUserPhone = userBookArr.toString();
        json.receiveOrtherUserPhone = ortherArr.toString();
        json.receiveBookUserName = userBookNameArr.toString();
        $.requestJsonAjax({
            url: $appName + "/sms/info/sendMsg",
            type: "post",
            data: json,
            success: function (result) {
                if (result.success) {
                    toastr.success(result.msg);
                    setTimeout(function () {
                        sessionStorage.setItem("menuCheckedId", "8a808eb673472c4401734732f8b50020");
                        sessionStorage.setItem("hasSub", 0);
                        window.location.href = $appName + "/sms/info/list";
                    }, 1500)
                } else {
                    toastr.error(result.msg);
                }

            }
        })
    }

    function saveDraft() {
        var userBookPhone = $("#userBookPhone").val();
        var userBookName = $("#userBookName").val();
        var orther = $("#ortherUser").val();
        /* if ((userBookPhone == null || userBookPhone == '') && (orther == null || orther == "")) {
             toastr.error("接收人不可为空");
             return false;
         }*/
        if (orther != null && orther != "") {
            if (!checkOrtherUser(orther.trim())) {
                return false;
            }
        }
        var topic = $("#topic").val();
        var content = $("#content").val();
        if (topic == null || topic == "") {
            toastr.error("短信主题不可为空");
            return false;
        }
        if (content == null || content == "") {
            toastr.error("短信内容不可为空");
            return false;
        }
        var totalMobile = userBookPhone.split(",").concat(orther.split(","));
        if (totalMobile.length > 5000) {
            toastr.error("接收人不可超过5000");
            return false;
        }
        var list = totalMobile.filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var userBookArr = userBookPhone.split(",").filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var userBookNameArr = userBookName.split(",").filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var ortherArr = orther.split(",").filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var userView = $("#addressBook").val().split(",").filter(function (s) {
            return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        var json = {};
        debugger;
        if ($("#flagStr").val() != "sendSms") {//从草稿箱跳过来的
            json.id = $("#id").val();
        }
        json.receiveBookUserView = userView.toString();
        json.receiveUserPhone = list.toString();
        json.msgSubject = topic;
        json.msgContent = content;
        json.receiveBookUserPhone = userBookArr.toString();
        json.receiveOrtherUserPhone = ortherArr.toString();
        json.receiveBookUserName = userBookNameArr.toString();
        $.requestJsonAjax({
            url: $appName + "/sms/info/saveDraft",
            type: "post",
            data: json,
            success: function (result) {
                if (result.success) {
                    toastr.success(result.msg);
                    setTimeout(function () {
                        sessionStorage.setItem("menuCheckedId", "8a808eb6734cb30001734cb62ade0018");
                        sessionStorage.setItem("hasSub", 0);
                        window.location.href = $appName + "/sms/drafts/list";
                    }, 1500)
                } else {
                    toastr.error(result.msg);
                }

            }
        })
    }

    function clearForm() {
        $("#addressBook").empty();
        $("#userBookPhone").val("");
        $("#userBookName").val("");
        $("#ortherUser").empty();
        $("#topic").val("");
        $("#content").empty();
    }

    function backPre() {
        var flag = $("#flagStr").val();
        if (flag != null && flag != "") {//发件箱
            sessionStorage.setItem("menuCheckedId", "8a808eb673472c4401734732f8b50020");
        } else {//草稿箱
            sessionStorage.setItem("menuCheckedId", "8a808eb6734cb30001734cb62ade0018");
        }
        sessionStorage.setItem("hasSub", 0);
        window.location.href = $appName + $("#url").val();
    }
</script>
<script type="text/javascript">
    $(document).ready(function () {
        //ztree 方法
        var setting = {
            view: {
                showLine: false
            },
            callback: {
                beforeClick: beforeClick,//点击之前调用的方法
                onClick: clickOrg
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        var nodesStr = $("#treeList").val();
        var zNodes = JSON.parse(nodesStr);
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        autosize($("#addressBook"));
        autosize($("#ortherUser"));

        function beforeClick(treeId, treeNode, clickFlag) {
            if (treeNode.isParent) {
                return false;
            } else {
                return true;
            }
        }

        //ztree 节点点击方法
        function clickOrg(event, treeId, treeNode) {
            if (treeNode.type = "user") {
                var text = $("#addressBook").val();
                var patt1 = new RegExp(treeNode.userPhone);
                var result = patt1.test(text);
                if (result) {
                    toastr.error("用户已存在");
                    return false;
                }
                $("#addressBook").append(treeNode.name + "<" + treeNode.userPhone + ">,");
                var vla = $("#userBookPhone").val();
                if (vla != null && vla != "") {
                    $("#userBookPhone").val($("#userBookPhone").val() + treeNode.userPhone + ",")
                    $("#userBookName").val($("#userBookName").val() + treeNode.name + ",")
                } else {
                    $("#userBookPhone").val(treeNode.userPhone + ",");
                    $("#userBookName").val(treeNode.name + ",");
                }
                autosize.update($("#addressBook"));
            }

        }


    });

</script>
</html>